/**
 * Copyright (c) Enalean, 2016 - 2017. All Rights Reserved.
 *
 * This file is a part of Tuleap.
 *
 * Tuleap is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * Tuleap is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Tuleap. If not, see <http://www.gnu.org/licenses/>.
 */

@import 'src/scss/variables/colors/common-colors';

$nav-width: 150px;
$nav-margin: 30px;

@mixin themable(
    $theme-color,
    $tlp-theme-background-color,
    $tlp-ui-info,
    $tlp-ui-success,
    $tlp-ui-warning,
    $tlp-ui-danger,
    $tlp-ui-border-normal,
    $tlp-illustration-primary-color,
    $tlp-illustration-secondary-light-color,
    $tlp-illustration-secondary-dark-color,
    $tlp-illustration-tertiary-color
) {
    background: $tlp-theme-background-color;

    .doc-section {
        p a:not([class^=tlp-button]) {
            color: $theme-color;
        }

        .code-inline {
            background: transparentize($theme-color, .95);
            color: darken($theme-color, 20%);
        }

        // scss-lint:disable SelectorFormat
        .CodeMirror-gutters {
            border-left: 3px solid transparentize($theme-color, .8);
        }
    }

    #doc-title {
        color: $theme-color;
    }

    .main-nav > ul > .nav-item.active > a,
    .main-nav > ul > .nav-item:hover > a {
        border-color: $theme-color;
        color: $theme-color;
    }

    .sub-nav > ul > .nav-item.active > a,
    .sub-nav > ul > .nav-item:hover > a {
        color: $theme-color;
    }

    .doc-color-info    { background-color: $tlp-ui-info; }
    .doc-color-success { background-color: $tlp-ui-success; }
    .doc-color-warning { background-color: $tlp-ui-warning; }
    .doc-color-danger  { background-color: $tlp-ui-danger; }

    .doc-color-illustration-primary-color {
        background-color: $tlp-illustration-primary-color;
    }

    .doc-color-illustration-secondary-light-color {
        background-color: $tlp-illustration-secondary-light-color;
    }

    .doc-color-illustration-secondary-dark-color {
        background-color: $tlp-illustration-secondary-dark-color;
    }

    .doc-color-illustration-tertiary-color {
        background-color: $tlp-illustration-tertiary-color;
    }

    .example {
        .tlp-centered {
            border: 1px solid $theme-color;
            border-top: 0;
            border-bottom: 0;
        }

        .tlp-framed {
            box-shadow: inset 0 0 0 20px transparentize($theme-color, .8);
        }

        .tlp-framed-vertically::before {
            background: transparentize($theme-color, .8);
        }

        .tlp-framed-vertically::after {
            background: transparentize($theme-color, .8);
        }

        .tlp-framed-horizontally::before {
            background: transparentize($theme-color, .9);
        }

        .tlp-framed-horizontally::after {
            background: transparentize($theme-color, .9);
        }
    }

    [id^=example-layout-] {
        > div {
            border: 1px solid $tlp-ui-border-normal;
        }
    }

    #example-modals-structure .tlp-modal {

        > .tlp-modal-body {
            border-right-color: $tlp-ui-border-normal;
            border-left-color: $tlp-ui-border-normal;
        }

        > .tlp-modal-footer {
            border-right-color: $tlp-ui-border-normal;
            border-bottom-color: $tlp-ui-border-normal;
            border-left-color: $tlp-ui-border-normal;
        }
    }

    #dropdown-icon-right-example:hover {
        color: $theme-color;
    }
}

body {
    min-height: 100vh;

    &.orange {
        @import 'src/scss/variables/variables-orange';
        @include themable(
            $tlp-theme-color,
            $tlp-theme-background-color,
            $tlp-ui-info,
            $tlp-ui-success,
            $tlp-ui-warning,
            $tlp-ui-danger,
            $tlp-ui-border-normal,
            $tlp-illustration-primary-color,
            $tlp-illustration-secondary-light-color,
            $tlp-illustration-secondary-dark-color,
            $tlp-illustration-tertiary-color
        );
    }

    &.blue {
        @import 'src/scss/variables/variables-blue';
        @include themable(
            $tlp-theme-color,
            $tlp-theme-background-color,
            $tlp-ui-info,
            $tlp-ui-success,
            $tlp-ui-warning,
            $tlp-ui-danger,
            $tlp-ui-border-normal,
            $tlp-illustration-primary-color,
            $tlp-illustration-secondary-light-color,
            $tlp-illustration-secondary-dark-color,
            $tlp-illustration-tertiary-color
        );
    }

    &.green {
        @import 'src/scss/variables/variables-green';
        @include themable(
            $tlp-theme-color,
            $tlp-theme-background-color,
            $tlp-ui-info,
            $tlp-ui-success,
            $tlp-ui-warning,
            $tlp-ui-danger,
            $tlp-ui-border-normal,
            $tlp-illustration-primary-color,
            $tlp-illustration-secondary-light-color,
            $tlp-illustration-secondary-dark-color,
            $tlp-illustration-tertiary-color
        );
    }

    &.grey {
        @import 'src/scss/variables/variables-grey';
        @include themable(
            $tlp-theme-color,
            $tlp-theme-background-color,
            $tlp-ui-info,
            $tlp-ui-success,
            $tlp-ui-warning,
            $tlp-ui-danger,
            $tlp-ui-border-normal,
            $tlp-illustration-primary-color,
            $tlp-illustration-secondary-light-color,
            $tlp-illustration-secondary-dark-color,
            $tlp-illustration-tertiary-color
        );
    }

    &.purple {
        @import 'src/scss/variables/variables-purple';
        @include themable(
            $tlp-theme-color,
            $tlp-theme-background-color,
            $tlp-ui-info,
            $tlp-ui-success,
            $tlp-ui-warning,
            $tlp-ui-danger,
            $tlp-ui-border-normal,
            $tlp-illustration-primary-color,
            $tlp-illustration-secondary-light-color,
            $tlp-illustration-secondary-dark-color,
            $tlp-illustration-tertiary-color
        );
    }

    &.red {
        @import 'src/scss/variables/variables-red';
        @include themable(
            $tlp-theme-color,
            $tlp-theme-background-color,
            $tlp-ui-info,
            $tlp-ui-success,
            $tlp-ui-warning,
            $tlp-ui-danger,
            $tlp-ui-border-normal,
            $tlp-illustration-primary-color,
            $tlp-illustration-secondary-light-color,
            $tlp-illustration-secondary-dark-color,
            $tlp-illustration-tertiary-color
        );
    }
}

.hljs {
    background: none;
}

@import 'nav';
@import 'sections';
@import 'javascript-sections';
